<template>
  <div class="our-menu">
    <div class="head_search">
      <div class="head_title">
        <div class="main_title">菜单</div>
        <div class="sub_title">选择你的最爱</div>
      </div>
      <div class="search_btn">
        <img src="@/assets/icons/search.svg" alt="" />
      </div>
    </div>
    <div class="tabs_control">
      <TabsSide
        :listMenu="listMenu"
        @menuClick="menuClick"
        :activeIndex="activeIndex"
      ></TabsSide>
    </div>
    <div class="billboards">
      <div class="title">现在就订购三杯咖啡吧!</div>
      <div class="button" @click="goOrderCoffee">马上下单</div>
    </div>
    <div class="main_menu">
      <div class="menu_title">
        <img src="@/assets/icons/coffee.svg" alt="" />
        <div class="title">热销咖啡</div>
      </div>
      <div
        class="menu_main"
        v-for="(item, index) in detailsList"
        :key="index"
        @click="showPopUp"
      >
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
        <div class="details">
          <div class="first_title">{{ item.name }}</div>
          <div class="second_title">
            <div class="left">{{ item.price }}</div>
            <div class="right">{{ item.describe }}</div>
          </div>
        </div>
        <div class="love"><img src="@/assets/icons/love.svg" alt="" /></div>
      </div>
    </div>
    <div style="height:1px;"></div>
    <div class="PopUp">
      <PopUp :visible="visible" @closePopUp="closePopUp"></PopUp>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import TabsSide from "@/components/TabsSide.vue";
import PopUp from "../../components/PopUp.vue";
import { useRouter } from "vue-router";
export default defineComponent({
  components: {
    TabsSide,
    PopUp,
  },
  setup() {
    const router = useRouter();
    let visible = ref(false);
    const listMenu = ref([
      {
        key: "All",
        name: "全部",
        isActive: true,
      },
      {
        key: "Snacks",
        name: "小吃",
        isActive: false,
      },
      {
        key: "Coffess",
        name: "咖啡",
        isActive: false,
      },
    ]);
    const activeIndex = ref(0);
    const detailsList = ref([
      {
        img: require("@/assets/images/cupImg.png"),
        name: "巧克力咖啡",
        price: "$35,02",
        describe: "*折扣10%*",
      },
      {
        img: require("@/assets/images/cupImg.png"),
        name: "提拉米苏咖啡",
        price: "$440",
        describe: "",
      },
      {
        img: require("@/assets/images/cupImg.png"),
        name: "黑咖啡",
        price: "$100,04",
        describe: "*新品*",
      },
      {
        img: require("@/assets/images/cupImg.png"),
        name: "Senja咖啡",
        price: "$450,01",
        describe: "",
      },
    ]);
    const goOrderCoffee = () => {
      router.push("/orderCoffee");
    };
    function menuClick(param: any, index: number) {
      listMenu.value.forEach((item) => {
        item.isActive = item.name === param.menuName ? true : false;
      });
      activeIndex.value = index;
    }
    function closePopUp() {
      visible.value = false;
    }
    function showPopUp() {
      visible.value = true;
    }
    return {
      listMenu,
      detailsList,
      activeIndex,
      menuClick,
      visible,
      closePopUp,
      showPopUp,
      goOrderCoffee,
    };
  },
});
</script>


<style scoped lang="less">
.our-menu {
  background-image: url("~@/assets/images/pureImg.jpg");
  .head_search {
    display: flex;
    justify-content: space-between;
    padding: 116px 64px 0px 60px;
    .head_title {
      .main_title {
        font-size: 46px;
        text-align: left;
        font-family: Helvetica;
        color: #ffffff;
        line-height: 62px;
      }
      .sub_title {
        font-size: 28px;
        font-family: Helvetica;
        color: #ffffff;
        line-height: 34px;
      }
    }
    .search_btn {
      width: 96px;
      height: 96px;
      background: #ffffff;
      box-shadow: 0px 72px 234px 0px #35405a;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 32px;
        height: 32px;
      }
    }
  }
  .tabs_control {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 48px 48px 32px 48px;
    font-size: 28px;
    font-family: Helvetica;
    background: #ffffff;
    border-radius: 56px;
    color: #8e95af;
  }
  .billboards {
    background: #442916;
    margin: 0px 48px;
    padding: 30px 0px 30px 40px;
    box-shadow: 0px 64px 100px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    .title {
      width: 338px;
      height: 88px;
      font-size: 28px;
      font-family: Helvetica;
      color: #ffffff;
      line-height: 44px;
      margin-bottom: 22px;
    }
    .button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 234px;
      height: 64px;
      background: #6a4428;
      border-radius: 48px;
      font-size: 24px;
      font-family: Helvetica;
      color: #ffffff;
      line-height: 28px;
    }
  }
  .main_menu {
    margin: 32px 48px 66px 48px;
    padding: 48px;
    // height: 850px;
    background: #ffffff;
    box-shadow: 0px 64px 100px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16px;

    .menu_title {
      display: flex;
      align-items: center;
      margin-bottom: 32px;
      img {
        width: 64px;
        height: 64px;
        margin-right: 32px;
      }
      .title {
        font-size: 36px;
        font-family: Helvetica;
        color: #333333;
        line-height: 44px;
      }
    }
    .menu_main {
      margin: 30px 0px;
      padding-bottom: 32px;
      display: flex;
      align-items: center;
      font-size: 32px;
      border-bottom: 2px solid rgba(151, 151, 151, 0.19);
      .img {
        width: 96px;
        height: 96px;
        background: #1c2238;
        border-radius: 10px;
        margin-right: 32px;
        img {
          width: 96px;
          height: 96px;
        }
      }
      .details {
        flex: 1;
        .first_title {
          font-size: 32px;
          font-family: Helvetica;
          color: #333333;
          line-height: 38px;
          margin-bottom: 12px;
        }
        .second_title {
          display: flex;
          font-size: 24px;
          font-family: Helvetica;
          line-height: 28px;
          .left {
            color: #939393;
            margin-right: 8px;
          }
          .right {
            color: #f6a44e;
          }
        }
      }
      .love {
        width: 82px;
        height: 74px;
        background: #ffffff;
        border-radius: 16px;
        border: 2px solid #dee2ee;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 26px;
          height: 24px;
        }
      }
    }
  }
  .main_menu .menu_main:last-child {
    border: none;
  }
}
</style>